<template>
	<div class="update-journal">
		<div class="update-journal-warpper">
			<Row class="update-journal-row">
				<Col 
					class="update-journal-col"
					:xs="24" :sm="12" :md="8" :lg="6" 
					v-for="item in journalData">
					<div class="update-journal-cardbox">
						<Card class="update-journal-card" :padding="0">
					        <div class="card-warpper">
					           <header class="card-header">
					           		<span class="title">日志时间</span>
					           		<span class="content">{{filterTime(item.createDate)}}</span>
					           </header>
					           <div class="card-content">
					           		<div class="card-system">
					           			<div class="title">所属系统：</div>
					           			<div class="content">{{filterSystem(item.appNamesList)}}</div>
					           		</div>
					           		<div class="card-journal">
					           			<div class="title">日志内容：</div>
					           			<div class="content" v-html="filterInfo(item.info)"></div>
					           		</div>
					           </div>
					        </div>
					    </Card>
					</div>
				</Col>
			</Row>
		</div>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin } from 'common/js/mixins';
	import { timeFilter } from 'common/js/util';
	import { errorNotice } from 'common/js/dom';
	import { getUpdateJournalData } from 'api/Main';
	
	export default {
		mixins: [loadingMixin],
		created() {
			this._getUpdateJournalData();
		},
		data() {
			return {
				journalData: [],
				showLoading: false
			}
		},
		methods: {
			filterTime(time) {
				return timeFilter(new Date(time), 'yyyy-MM-dd HH:mm:ss');
			},
			filterSystem(arr) {
				if (arr.length) {
					return arr.join('、');
				}else {
					return '无';
				}
			},
			filterInfo(info) {
				return info.replace(/[\r]/g, '<br />');
			},
			_getUpdateJournalData() {
				this.showLoading = true;
				getUpdateJournalData()
					.then(res => {
						this.journalData = res.rows;
						this.showLoading = false;
					})
					.catch(res => {
						errorNotice(res.message);
						this.showLoading = false;
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '~common/scss/color';

	.update-journal {
		width: 100%;
		height: 100%;
		overflow: auto;
		.update-journal-warpper {
			width: 100%;
			padding: 5px;
			.update-journal-row {
				.update-journal-col {
					padding: 5px;
					.update-journal-cardbox {
						width: 100%;
						height: 200px;
						.update-journal-card {
							width: 100%;
							height: 100%;
							overflow: hidden;
							.card-warpper {
								width: 100%;
								padding: 0 5px;
								.card-header {
									height: 25px;
									line-height: 25px;
									border-bottom: 1px solid lightgray;
									.title {
										padding-right: 5px;
										border-right: 1px solid lightgray;
									}
									.content {
										color: $color-danger;
									}
								}
								.card-content {
									width: 100%;
									height: 175px;
									.card-system, .card-journal {
										display: flex;
										.title {
											flex: 0 0 80px;
										}
										.content {
											flex: 1;
										}
									}
									.card-system {
										height: 45px;
									}
									.card-journal {
										margin-top: 5px;
										height: 125px;
										overflow-y: auto;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>